<template>
  <div :class="$style.wrap">
    <Button type="primary" @click="visibleHandle">{{ text }}</Button>
    <el-dialog :visible.sync="visible" title="" :close-on-click-modal="false" @open="initData" @close="resetForm">
      <FormContainer :column="1">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
          <el-form-item prop="prizeName" label="奖品名称">
            <el-input v-model="formData.prizeName" clearable placeholder="请输入奖品名称"></el-input>
          </el-form-item>
          <el-form-item prop="quantity" label="奖品数量">
            <el-input v-model="formData.quantity" number clearable placeholder="请输入奖品数量"></el-input>
          </el-form-item>
          <el-form-item>
            <Button type="primary" @click="resetForm">重置</Button>
            <Button type="primary" @click="submitHandle">确定</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
    </el-dialog>
  </div>
</template>
<script>
import FormContainer from '@/components/FormContainer'
import { deepCopy } from '@/utils'
import { postCarePrize, putCarePrize } from '@/api/luckyDrawGift'
export default {
  name: 'AddEdit',
  components: {
    FormContainer
  },
  props: {
    row: {
      type: Array,
      default: () => []
    },
    text: {
      type: String,
      default: '添加'
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const validatorQuantity = (r, v, c) => {
      if (v < 0) {
        c(new Error('奖品数量不能小于0'))
      } else {
        c()
      }
    }
    return {
      visible: false,
      formData: {
        prizeName: '',
        quantity: ''
      },
      formRules: {
        prizeName: [{ required: true, message: '请输入奖品名称', trigger: 'change' }],
        quantity: [
          { required: true, message: '请输入奖品数量', trigger: 'change' },
          { validator: validatorQuantity, trigger: 'change' }
        ]
      }
    }
  },
  computed: {
  },
  methods: {
    visibleHandle() {
      if (this.isEdit) {
        if (this.row.length > 1) {
          this.$message.info('一次只能编辑一条数据！')
        } else if (this.row.length <= 0) {
          this.$message.info('请选择要修改的数据！')
        } else {
          this.visible = true
        }
      } else {
        this.visible = true
      }
    },
    // 重置表单
    resetForm() {
      this.$refs.form.resetFields()
    },
    // 确定
    submitHandle() {
      return this.$refs.form.validate().then(() => {
        const data = deepCopy(this.formData)
        let ajax = postCarePrize
        if (this.isEdit) {
          ajax = putCarePrize
          data.id = this.row[0].id
        }
        return ajax(data).then(res => {
          this.$message.success('保存成功！')
          this.visible = false
          this.$emit('refresh')
        })
      })
    },
    // 初始化formData
    initData() {
      if (this.isEdit && this.row.length >= 0) {
        for (const k of Object.keys(this.formData)) {
          this.$set(this.formData, k, this.row[0][k])
        }
      }
    }
  }
}
</script>
<style lang='scss' module>
.wrap{
    display: inline-block;
}
</style>
